<template>
    <el-menu default-active="2" class="el-menu-vertical-demo" :unique-opened="isUniqueOpened">
        <menu-logo></menu-logo>
        <!-- 在为el-menu设置unique-opened属性时必须要确保el-sub-menu、el-menu-item中index的唯一性，如果index不唯一则不生效 -->
        <!-- 本组件作为父组件向子组件传递数据menuList，子组件需要定义menuList属性以确保可以接受该数据 -->
        <menu-item :menuList="menuList"></menu-item>
    </el-menu>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import MenuItem from "./MenuItem.vue";
import MenuLogo from "./MenuLogo.vue";

// 自定义的假的树形菜单数据
// reactive函数用来处理响应式数据，处理的数据一般是复杂类型数据，如对象类型
// ref函数也可以处理响应式数据，不过数据一般是基本数据类型
const isCollapse = ref(false);
const isUniqueOpened = ref(false);

const menuList = reactive([
    // 系统管理
    {
        path: "/system",
        name: "system",
        component: "Layout",
        meta: {
            title: "系统管理",
            icon: "Setting",
            roles: ["sys:manage"],
        },
        children: [
            {
                path: "/worker",
                name: "worker",
                component: "Layout",
                meta: {
                    title: "员工管理",
                    icon: "Setting",
                    roles: ["sys:manage"],
                },
            },
            {
                path: "/happy",
                name: "happy",
                component: "Layout",
                meta: {
                    title: "菜单管理",
                    icon: "Setting",
                    roles: ["sys:manage"],
                },
            },
        ],
    },

    // 商场管理
    {
        path: "/mail",
        name: "mail",
        component: "Layout",
        meta: {
            title: "商场管理",
            icon: "Setting",
            roles: ["sys:manage"],
        },
        children: [
            {
                path: "/worker11",
                name: "worker11",
                component: "Layout",
                meta: {
                    title: "员工管理22",
                    icon: "Setting",
                    roles: ["sys:manage"],
                },
            },
            {
                path: "/happy22",
                name: "happy22",
                component: "Layout",
                meta: {
                    title: "菜单管理22",
                    icon: "Setting",
                    roles: ["sys:manage"],
                },
            },
        ],
    },
]);
</script>
